<template>
  <el-dialog
      title="导出JSON"
      :with-header="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
      custom-class="layer_wrap template-layer"
      :before-close="()=>handleClose('ruleForm')">
    <div class="layer_inside">
      <div class="layer_header">
        <span class="title">模板创建</span>
        <i class="el-icon-close" @click="()=>handleClose('ruleForm')"/>
      </div>
      <div class="layer_main_wrap">
        <el-form class="form_wrap" ref="ruleForm" :model="form" :rules="rules" v-if="visible">
          <div class="form_inside">
            <el-form-item prop="title">
              <div class="el-form-item-inside">
                <div class="item-title">模板名称</div>
                <div class="item-content">
                  <el-input v-model="form.title" placeholder="请输入模板名称"></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="resolution">
              <div class="el-form-item-inside">
                <div class="item-title">分辨率</div>
                <div class="item-content">
                  <el-select v-model="form.resolution" placeholder="请选择分辨率" @change="handleChangeResolution"
                             :disabled="type==='edit'">
                    <el-option
                        v-for="item in resolutionOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.hasShow"
                    />
                  </el-select>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="devType">
              <div class="el-form-item-inside">
                <div class="item-title">终端类型</div>
                <div class="item-content">
                  <el-select v-model="form.devType" placeholder="请选择终端类型" :disabled="type==='edit'">
                    <el-option
                        v-for="item in devTypeOptions(form.resolution)"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </el-form-item>

            <el-form-item prop="bizType">
              <div class="el-form-item-inside">
                <div class="item-title">业务类型</div>
                <div class="item-content">
                  <el-select v-model="form.bizType" placeholder="请选择业务类型" :disabled="type==='edit'">
                    <el-option
                        v-for="item in bizTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="(item.value)!==0"
                    />
                  </el-select>
                </div>
              </div>
            </el-form-item>
          </div>
          <el-form-item class="button-wrap2">
            <el-row class="el-form-button-inside">
              <el-col :span="12">
                <el-button @click="handleClose('ruleForm')">取消</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" @click="handleSubmit('ruleForm')">确定</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {ModelDesignApi} from "@/api/modeldesign";

export default {
  name: 'TemplateCreate',

  props: {
    info: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      required: false,
      default: 'create'
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
  },

  data() {
    return {
      form: {
        title: '',
        devType: '',
        bizType: '',
        resolution: '',
      },
      rules: {
        title: [
          {required: true, message: '请输入模板名称', trigger: 'blur'}
        ],
        resolution: [
          {required: true, message: '请选择设备分辨率', trigger: 'blur'}
        ],
        devType: [
          {required: true, message: '请选择设备类型', trigger: 'blur'}
        ],
        bizType: [
          {required: true, message: '请选择业务类型', trigger: 'blur'}
        ],
      },
    }
  },

  computed: {
    // 分辨率
    resolutionOptions() {
      return this.$store.getters['template/getResolutionOptions']
    },
    // 终端设备
    devTypeOptions() {
      return function (val) {
        let options = this.$store.getters['template/getDevTypeOptions'];
        return Reflect.get(options, val) || Array()
      }
    },

    // 业务类型
    bizTypeOptions() {
      return this.$store.getters['template/getBizType'];
    },
  },

  mounted() {
    // console.log('init')
  },

  methods: {
    // 关闭
    handleClose(formName) {
      this.$refs[formName].resetFields();
      this.$emit("handleCancel", false);
    },

    // 改变分辨率--重置设置类型
    handleChangeResolution() {
      Reflect.set((this.form), 'devType', null);
    },

    // 发布
    handleSubmit(formName) {
      const self = this;
      self.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (self.type === 'create') {
            let resp = await ModelDesignApi.templateNameOnly((self.form));
            console.log(resp)
            if ((resp['code']) === 200) {
              Reflect.set((self.form), 'bizType', 0)
              localStorage.setItem('templateInfo', JSON.stringify(self.form));
              localStorage.removeItem('widget__list__backup');
              localStorage.removeItem('form__config__backup');
              self.handleClose(formName);
              await self.$router.push({
                path: '/templateDetails/create/0',
              })
            } else {
              this.$message({
                message: `${resp['msg']}`,
                type: 'warning'
              });
            }
          } else {
            Reflect.set((self.info), 'title', (self.form.title));
            Reflect.set((self.info), 'bizType', 0)
            console.log((self.info))
            let {code} = await ModelDesignApi.update((self.info));
            if (code === 200) {
              console.log('修改成功');
              self.handleClose(formName);
              self.$emit("handleSure", false);
            } else {
              console.log('修改失败')
            }
          }
        }
      })
    },
  },

  watch: {
    visible(val) {
      const self = this;
      const info = (self.info);
      if (val && (self.type === 'edit')) {
        Reflect.set((self.form), 'title', (info.title));
        Reflect.set((self.form), 'bizType', (info.bizType) || 0);
        Reflect.set((self.form), 'devType', (info.devType));
        Reflect.set((self.form), 'resolution', (info.resolution));
      } else {
        Reflect.set((self.form), 'title', (info.title));
        Reflect.set((self.form), 'bizType', (info.bizType) || 0);
        Reflect.set((self.form), 'devType', (info.devType));
        Reflect.set((self.form), 'resolution', (info.resolution));
      }
    }
  }

}
</script>

<style lang="scss" scoped>
@import "@/components/assets/style/layer";
@import "assets/style";
</style>
